<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>试题管理</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-table.css" rel="stylesheet"/>
    <link href="css/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <link href="css/bootstrap-markdown.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>



    </style>
</head>
<body>
<!--导航栏开始-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">预热班学员管理系统—学生答题情况查看</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/rsm/addSubject.html">添加新习题</a></li>
                    <li></li>
                    <li class="active"><a href="/rsm/showallstudent.html">返回</a></li>
                    <li></li>
                </ul>
            </ul>
        </div>

    </div>
</nav>
<!--导航栏结束-->
<div class="container-fluid" align="center">

    <table id="mytable" data-toggle="table" data-url="/rsm/subject/showAllSubject.do">
        <thead>
        <tr>
        </tr>
        </thead>
    </table>

    <!--table工具栏开始-->
    <div id="toolbar">
        <div class="btn-group">
            <!--删除选中学生-->
            <button class="btn btn-default" onclick="deleteSelect()">
                <i class="glyphicon glyphicon-trash"></i>
            </button>
        </div>
    </div>
    <!--table工具栏结束-->
    <!--&lt;!&ndash;table工具栏开始&ndash;&gt;
    <div id="toolbar">
        <div class="btn-group">
            <a class='input-group date' id='datetimepicker1' style="float: left; left: 10px;">
                <input type='text' class="form-control" id='nowdate' style="width: 150px; height: 30px;" />
                <span class="input-group-addon" style="float: left; width: 50px; height: 30px;">
                    <span class="glyphicon glyphicon-calendar" onclick="Datetime()"></span>
                </span>
                <span class="input-group-addon" style="float: left; width: 50px; height: 30px;">
                    <span class="glyphicon glyphicon-search" onclick="refreshTable()"></span>
                </span>
            </a>
        </div>
    </div>-->
    <!--table工具栏结束-->
        <!--<h1 class="form-signin-heading">当前显示<span id="answerDate"></span>的答案</h1>-->
        <!--<br>-->
        <!--<div id="ti"></div>-->

</div> <!-- /container -->

<!-- jQuery Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边 -->
<script src="js/jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-zh-CN.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="js/bootstrap-table-editable.js"></script>
<script>
    $("#mytable").bootstrapTable({
        method:'post',
        //显示搜索框
        search: true,
        //显示刷新按钮
        showRefresh:true,
        //显示切换视图（table/card）按钮
        showToggle:true,
        //是否显示内容列下拉框。
        showColumns:true,
        //设置为 true 会有隔行变色效果
        striped:true,
        //设置为 true 会在表格底部显示分页条
        pagination:true,
        pageSize: 50,
        pageList: [50,100], //可供选择的每页的行数（*）
        //是否显示列头showHeader:false
        showHeader:true,
        editable:true,
        //自定义工具栏
        toolbar:"#toolbar",
        toolbarAlign:'left',
        columns :[{
            field : 'checked',
            checkbox : true,
        },{
            title: '序号',
            field: '',
            align: 'center',
            formatter: function (value, row, index) {
                return index+1;
            }
        }, {
                field : 'content',
                title : '题目',
                editable: {
                    mode:"inline",
                    type: 'textarea',
                    title: '请输入内容',
                }
            },{
                field : 'sid',
                title : '所属章节的ID'
            }
        ],

        onEditableSave: function (field, row, oldValue, $el) {
            $.ajax({
                type: "post",
                url: "/rsm/subject/updateOne.do",
                data: row,
                dataType: 'JSON',
                success: function (data, status) {
                    if (status == "success") {
                        alert('提交数据成功');
                        $("#mytable").bootstrapTable('refresh');
                    }
                },
                error: function () {
                    alert('编辑失败');
                },
                complete: function () {

                }

            });
        }
    });

    //            删除选中
    function deleteSelect() {
        var a= $("#mytable").bootstrapTable('getSelections');
        if(a.length<=0){
            alert("请选中一行")
        }else{
            var b=JSON.stringify(a);
            var url="/rsm/subject/deleteSelete.do";
            $.ajax({
                dataType: "json",
                traditional:true,//这使json格式的字符不会被转码
                data: {"datalist":b},
                type: "post",
                url: url,
                success : function (data) {
                    $("#mytable").bootstrapTable('refresh');
                    alert("删除成功！");
                },
            });
        }
    }

    $(function() {


    });


</script>
</body>
</html>
